<template>
	<view class="s-login">
		<view class="bgbox"></view>
<!-- 		<view class="bgbox"><image class="loginbg" src="/static/logobg.jpg"></image></view> -->
		<view class="login-content">
			<image class="logo" src="/static/liao.png"></image>
			<view class="login-form">
				<!-- <uni-easyinput prefixIcon="search" v-model="usrname" placeholder="用户名/手机号"></uni-easyinput> -->
				<!-- <uni-easyinput prefixIcon="search" v-model="password" type="password" placeholder="请输入密码"></uni-easyinput> -->
				<view class="inputitem">
					<uni-icons color="#000" custom-prefix="iconfont" type="icon-yonghu" size="25"></uni-icons>
					<input type="text" v-model="username" placeholder="用户名/手机号" />
				</view>
				<view class="inputitem">
					<uni-icons color="#000" custom-prefix="iconfont" type="icon-mima" size="25"></uni-icons>
					<input style="line-height: 60rpx;border: 0;" :type="passVisible ? 'text' : 'password'" v-model="password" placeholder="请输入密码" />
					<uni-icons @click="passVisible = !passVisible" color="#000" custom-prefix="iconfont" :type="passVisible ? 'icon-yanjing1' : 'icon-yanjing'" size="20"></uni-icons>
				</view>
				<button hover-class="btn-active" class="btn" type="default" @click="gologin">登录</button>

				<view class="morebtn">
					<text hover-class="btn-active">忘记密码</text>
					<text hover-class="btn-active">立即注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			passVisible: false,
			username: '15812301230',
			password: '123'
		};
	},
	methods: {
		gologin() {
			let parm = {
				usrname: this.username,
				password: this.password
			};
			this.$store.dispatch('user/userLoginAct', parm);

			// this.$get('/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/getbooks').then(res => {
			// 	console.log('用this.$get');
			// 	console.log(res.list);
			// 	this.list = res.list;
			// });
		}
	}
};
</script>

<style lang="scss">
.s-login {
	.bgbox{
		position: fixed;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		z-index: -1;
			background: url('@/static/logobg.jpg')no-repeat;
			background-size: 150%;
			    background-position: -27px -1px;
	}
	
	.login-content {
		padding: 116rpx 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
		.login-form {
			color: #fff;
			margin-top: 50rpx;
			.inputitem {
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 10rpx;
				height: 80rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				input {
					margin-left: 6rpx;
					color: #000;
					vertical-align: middle;
				}
			}
			// .uni-easyinput__content{
			// 	background: #fff;
			// 	margin-bottom: 40rpx;
			// }
		}
		.btn {
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: orange;
			margin-top: 40rpx;
		}
		.btn-active {
			opacity: 0.7;
		}
		.morebtn {
			display: flex;
			margin-top: 24rpx;
			justify-content: space-between;
			text-decoration: underline;
		}
	}
}
</style>
